<template>
  <el-row
    style="
      margin: 5px 0px 0px;
      height: 43px;
      display: flex;
      flex-wrap: nowrap;
      overflow: auto;
    "
  >
    <span
      style="
        vertical-align: middle;
        display: inline-block;
        padding-top: 2px;
        font-size: 13px;
        flex: none;
      "
      >查询条件：</span
    >
    <el-tag
      style="margin: 0px 5px 5px 0px; flex: none"
      v-for="tag in tags"
      :key="tag.prop || tag.start + '_' + tag.end"
      closable
      @close="removeTag(tag)"
    >
      {{ tag.desc }}：{{ tag.value }}
    </el-tag>
  </el-row>
  <el-form
    size="small"
    :inline="true"
    :model="query"
    label-width="48px"
    style="margin-bottom: 10px; position: relative; z-index: 100"
  >
    <el-row>
      <el-form-item label="状态" style="width: 150px" :style="elFormItemStyle">
        <el-select v-model="query.pd_id" @change="getPage(1)">
          <el-option label="全部" value=""></el-option>
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in ddo.productStatus"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="成品号"
        style="width: 150px"
        :style="elFormItemStyle"
      >
        <el-input v-model="query.product_id"></el-input>
      </el-form-item>

      <el-form-item label="类型" style="width: 130px" :style="elFormItemStyle">
        <el-select v-model="query.plan_type" @change="getPage(1)">
          <el-option label="全部" value=""></el-option>
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in ddo.prodTypes"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :style="elFormItemStyle">
        <el-button :icon="Search" circle @click="getPage(1)"></el-button>
      </el-form-item>

      <el-form-item v-show="queryMore" :style="elFormItemStyle">
        <el-tooltip effect="dark" content="简化" placement="top-start">
          <el-button :icon="Fold" circle @click="queryMore = false"></el-button>
        </el-tooltip>
      </el-form-item>
      <el-form-item v-show="!queryMore" :style="elFormItemStyle">
        <el-tooltip effect="dark" content="更多筛选" placement="top-start">
          <el-button
            :icon="Expand"
            circle
            @click="queryMore = true"
          ></el-button>
        </el-tooltip>
      </el-form-item>
    </el-row>

    <transition name="slide-fade">
      <div
        v-show="queryMore"
        style="
          position: absolute;
          top: 40px;
          left: 0px;
          background-color: white;
          box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1);
          border-radius: 5px;
        "
      >
        <el-row>
          <el-form-item
            label="客户"
            style="width: 230px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.product_cus" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.info_name"
                :value="item.info_id"
                v-for="item in cusList"
                :key="item.info_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="规格"
            style="width: 230px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.product_std" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.info_name"
                :value="item.info_id"
                v-for="item in stdList"
                :key="item.info_id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="等级"
            style="width: 130px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.product_level" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in ddo.prodLevels"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="花色"
            style="width: 230px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.product_color" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.info_name"
                :value="item.info_id"
                v-for="item in colorList"
                :key="item.info_id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="日期"
            style="width: 300px"
            :style="elFormItemStyle"
          >
            <el-col :span="11">
              <el-form-item style="width: 120px">
                <el-date-picker
                  v-model="query.date_start"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="开始日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center">
              <span style="color: #cccccc"> - </span>
            </el-col>
            <el-col :span="11">
              <el-form-item style="width: 120px">
                <el-date-picker
                  v-model="query.date_end"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-row>
      </div>
    </transition>
  </el-form>

  <el-table
    :data="page.list"
    :stripe="true"
    :fit="true"
    :max-height="tableMaxHeight"
    size="small"
    style="width: 100%; flex: auto"
  >
    <el-table-column
      fixed="left"
      prop="product_id"
      label="成品号"
      width="105"
    />

    <el-table-column fixed="left" prop="product_level" label="等级" width="60">
      <template #default="{ row }">
        <span style="padding:3px;border-radius:5px;" :style="{color:({'01':'#67C23A','02':'#E6A23C','03':'#F56C6C','04':'#73767a'})[row.product_level],backgroundColor:({'01':'#e1f3d8','02':'#faecd8','03':'#fde2e2','04':'#e9e9eb'})[row.product_level]}" >{{ ddo.text("prodLevels", row.product_level) }}</span>
      </template>
    </el-table-column>

    <el-table-column
      fixed="left"
      prop="product_num"
      label="产量(米)"
      width="70"
    />

    <el-table-column
      prop="store_num"
      label="已包装(米)"
      width="70"
    />

    <el-table-column
      fixed="left"
      prop="rest_num"
      label="未包装(米)"
      width="70"
    >
    <template #default="{ row }">
      <span style="color:#F56C6C;font-weight:bold;">{{row.rest_num}}</span>
    </template>
    </el-table-column>

    <el-table-column prop="plan_type" label="类型" width="80">
      <template #default="{ row }">
        {{ ddo.text("prodTypes", row.plan_type) }}
      </template>
    </el-table-column>

    <el-table-column prop="std_name" label="规格" />
    <el-table-column prop="color_name" label="花色" />
    <el-table-column prop="cus_name" label="客户" />
    <el-table-column prop="pn_date" label="下线时间" />
    <el-table-column prop="pd_id" label="状态" width="80">
      <template #default="{ row }">
        <span style="font-weight:bold;" :style="{color:row.pd_id == 2040?'#95d475':(row.pd_id == 2030?' #66b1ff':'#E6A23C')}">{{ ddo.text("productStatus", row.pd_id) }}</span>
      </template>
    </el-table-column>

    <el-table-column fixed="right" label="操作" width="45">
      <template #default="{ row }">
        <el-link v-if="row.pd_id != 2040" @click="addPkg(row)" style="font-size:13px;" type="primary">包装</el-link>
        <el-link v-if="row.pd_id != 2040" @click="execConfirm(row)" style="font-size:13px;" type="danger">完成</el-link>
        <!-- <el-button
          v-if="row.pd_id != 2040"
          type="primary" plain
          size="small"
          @click="addPkg(row)"
          style="margin-bottom: 5px"
          >包装</el-button
        >
        <br />
        <el-button
          v-if="row.pd_id != 2040"
          type="danger" plain
          size="small"
          @click="execConfirm(row)"
          >完成</el-button
        > -->
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    style="margin-top: 22px"
    small
    layout="sizes,prev, pager, next, jumper, ->, total"
    :total="page.total"
    v-model:page-size="query.pageSize"
    v-model:current-page="query.pageNum"
    :page-sizes="[1, 3, 5, 10, 15, 20, 30, 100]"
    @current-change="getPage"
    @size-change="getPage(1)"
  />
</template>

<script setup >
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { tip, get, post, put, del, ddo, elConfirm } from "@/common";
import { ElMessageBox } from "element-plus";
import { Expand, Fold, Search, ArrowDown } from "@element-plus/icons-vue";

const elFormItemStyle = { margin: "0px 12px 15px 0px" };

const tableMaxHeight = computed(() => ddo.homeElCardBodyHeight - 200);

const queryMore = ref(false);

const props = defineProps({
  //获取基础信息
  infoList: {
    type: Array,
    default() {
      return [];
    },
  },
});

//获取基础信息
const cusList = computed(() =>
  props.infoList.filter((item) => item.info_type === 1)
);
const stdList = computed(() =>
  props.infoList.filter((item) => item.info_type === 2)
);
const colorList = computed(() =>
  props.infoList.filter((item) => item.info_type === 3)
);

//获取列表数据
const query = reactive({
  pageNum: 1,
  pageSize: 5,
  pd_id: "",
  product_id: "",
  date_start: "",
  date_end: "",
  plan_type: "",
  product_cus: "",
  product_std: "",
  product_color: "",
});

//条件标签元数据
const getInfoName = (propVal, someList) => {
  const theItem = someList.value.find((item) => item.info_id == propVal);
  return theItem && theItem.info_name;
};
const queryTagMeta = [
  {
    range: false,
    desc: "状态",
    prop: "pd_id",
    getValue: (propVal) => ddo.text("productStatus", propVal),
  },
  { range: false, desc: "成品号", prop: "product_id" },
  {
    range: false,
    desc: "产品类型",
    prop: "plan_type",
    getValue: (propVal) => ddo.text("prodTypes", propVal),
  },
  {
    range: false,
    desc: "质量等级",
    prop: "product_level",
    getValue: (propVal) => ddo.text("prodLevels", propVal),
  },
  {
    range: false,
    desc: "产品客户",
    prop: "product_cus",
    getValue: (propVal) => getInfoName(propVal, cusList),
  },
  {
    range: false,
    desc: "产品规格",
    prop: "product_std",
    getValue: (propVal) => getInfoName(propVal, stdList),
  },
  {
    range: false,
    desc: "产品花色",
    prop: "product_color",
    getValue: (propVal) => getInfoName(propVal, colorList),
  },
  {
    range: true,
    desc: "下线日期",
    start: "date_start",
    end: "date_end",
  },
];

//以选择条件标签
const tags = computed(() => {
  const arr = [];

  queryTagMeta.forEach((meta) => {
    if (meta.range) {
      (query[meta.start] || query[meta.end]) &&
        arr.push({
          ...meta,
          value: meta.getValue
            ? meta.getValue(query[meta.start], query[meta.end])
            : `${query[meta.start]} ~ ${query[meta.end]}`,
        });
    } else {
      (query[meta.prop] || query[meta.prop] === false) &&
        arr.push({
          ...meta,
          value: meta.getValue
            ? meta.getValue(query[meta.prop])
            : query[meta.prop],
        });
    }
  });
  return arr;
});

const removeTag = (tag) => {
  if (tag.range) {
    if (typeof query[tag.start] === "number") {
      query[tag.start] = 0;
      query[tag.end] = 0;
    } else {
      query[tag.start] = "";
      query[tag.end] = "";
    }
  } else {
    if (typeof query[tag.start] === "number") {
      query[tag.prop] = 0;
    } else {
      query[tag.prop] = "";
    }
  }
  getPage(1);
};

const page = ref({ total: 0 });

const getPage = (pageNo) => {
  query.pageNum = pageNo || 1;
  get("/process/pkg/product-list", query).then((result) => {
    page.value = result.data;
    query.pageNum = page.value.current;
    query.pageSize = page.value.pageSize;
  });
};

getPage(1);

const emit = defineEmits(["add-pkg-success", "complete-pkg-success"]);

const execAdd = (row, num) => {
  post(`/process/pkg/pkg-add/${row.product_id}/${num}`).then((result) => {
    emit("add-pkg-success");
    tip.success("保存成功！");
  });
};

const addPkg = (row) => {
  ElMessageBox.prompt(`请输入包装产量:`, "包装录入", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPattern: /0\.[1-9]|[1-9][0-9]*\.[1-9]|[1-9][0-9]*/,
    inputErrorMessage: "错误产量！",
  })
    .then(({ value }) => {
      execAdd(row, value);
    })
    .catch(() => {});
};

//确认包装数据
const execConfirm = (row) => {
  if (row.rest_num > 0) {
    tip.error("还有未包装成品量，不允许完成包装！");
    return;
  }
  put(
    `/process/pkg/all-done/${row.product_id}`,
    {},
    { title: "提示", message: "您确定完成包装吗？" }
  ).then((result) => {
    emit("complete-pkg-success");
    tip.success("确定包装数据成功！");
  });
};

const refresh = () => getPage(page.value.current);
defineExpose({ refresh });
</script>

<style scoped>
.x {
}

.slide-fade-enter-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-leave-active {
  /* transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); */
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(300px);
  opacity: 0;
}
</style>